<template>
  <div class="app-container home">
    <div class="myTask">
<!--      <h3 style="display: inline-block;margin-right: 3px">我的任务</h3>
      <el-button type="text" class="addBtn"><i class="el-icon-circle-plus-outline"></i></el-button>-->
      <div class="home_title">
        {{userName}} <span class="txt">Hi,您好！</span>
      </div>
        <el-card class="box-card dai-card" style="height: 150px;width: 250px;display: inline-block;margin-right: 30px">
          <div class="title2">
            <span>员工</span>
            <el-button
              size="small"
              type="text"
              class="txt1 marT"
              @click="interUser"
            >更多<i class="el-icon-arrow-right" style="color: #888"></i
            ></el-button>
          </div>
          <div class="mid">
            <div class="con">
              <div class="bt1" >{{ totalNum }}</div>
              <div class="bt2 txt1">全部（个）</div>
            </div>
          </div>
        </el-card>
      <el-card class="box-card dai-card" style="height: 150px;width: 250px;display: inline-block">
        <div class="title2">
          <span>用户</span>
          <el-button
            size="small"
            type="text"
            class="txt1 marT"
            @click="interUser"
          >更多<i class="el-icon-arrow-right" style="color: #888"></i
          ></el-button>
        </div>
        <div class="mid">
          <div class="con">
            <div class="bt1">{{ totalNum }}</div>
            <div class="bt2 txt1">全部（个）</div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="myShen">
      <h3>待审批</h3>
      <el-card class="box-card dai-card">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">待办</el-menu-item>
            <el-menu-item index="2" style="float: right">已审批</el-menu-item>
        </el-menu>
        <span style="display:inline-block;height: 370px;width: 520px" class="spanTable">
          <el-table v-if="tableData.length > 0" :data="tableData" style="width: 100%;padding: 0" :show-header="false" row-height="70px">
            <el-table-column prop="name" width="230px" style="margin-right: -10px">
              <template slot-scope="scope">
                 <span style="margin-right: 2px">员工</span>
                <span style="color: #5d5df5">{{ scope.row.name }}</span>
                <span style="margin-left: 2px">发起了一个出差申请</span>
            </template>
            </el-table-column>
            <el-table-column prop="objective" width="130px" style="margin-left: -60px">
              <template slot-scope="scope">
                <span style="margin-right: 2px">出行目的:</span>
                <span style="color: #5d5df5">{{ scope.row.objective }}</span>
              </template>
            </el-table-column >
            <el-table-column prop="status" width="65px" style="margin-left: -20px;padding-left: -20px">
              <template slot-scope="scope">
                <dict-tag style="width: 10px" :options="dict.type.ask_leave" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status === 1" size="mini" type="text" icon="el-icon-view"
                           @click="lookWaitDetail(scope.row,'evection')">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
<!--      请假待办  -->
          <el-table v-if="tableLeaveData.length > 0" :data="tableLeaveData" style="width: 100%;padding: 0" :show-header="false" row-height="70px">
            <el-table-column prop="name" width="230px" style="margin-right: -10px">
              <template slot-scope="scope">
                 <span style="margin-right: 2px">员工</span>
                <span style="color: #34f1ae">{{ scope.row.name }}</span>
                <span style="margin-left: 2px">发起了一个请假申请</span>
            </template>
            </el-table-column>
            <el-table-column prop="type" width="130px" style="margin-left: -50px">
              <template slot-scope="scope">
                <span>请假类型:</span>
                <span style="color: #34f1ae;display: inline-block">
                  <dict-tag :options="dict.type.ask_type" :value="scope.row.type"/>
                </span>
              </template>
            </el-table-column >
            <el-table-column prop="status" width="65px" style="margin-left: -20px;padding-left: -20px">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.ask_leave" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status === 1" size="mini" type="text" icon="el-icon-view"
                           @click="lookWaitDetail(scope.row,'askLeave')">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
<!--     离职申请   -->
          <el-table v-if="lizhitableData.length > 0" :data="lizhitableData" style="width: 100%;padding: 0" :show-header="false" row-height="70px">
            <el-table-column prop="name" width="230px" style="margin-right: -10px">
              <template slot-scope="scope">
                 <span style="margin-right: 2px">员工</span>
                <span style="color: #e0215a">{{ scope.row.name }}</span>
                <span style="margin-left: 2px">发起了一个离职申请</span>
            </template>
            </el-table-column>
            <el-table-column prop="objective" width="130px" style="margin-left: -60px">
              <template slot-scope="scope">
                <span style="margin-right: 2px">离职原因:</span>
                <span style="color: #e0215a">{{ scope.row.reasonDetail }}</span>
              </template>
            </el-table-column >
            <el-table-column prop="status" width="65px" style="margin-left: -20px;padding-left: -20px">
              <template slot-scope="scope">
                <dict-tag style="width: 10px" :options="dict.type.sys_leave_status" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status === '1'" size="mini" type="text" icon="el-icon-view"
                           @click="lookWaitDetail(scope.row,'lizhiLeave')">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--  维修申请  -->
          <el-table v-if="repairTable.length > 0" :data="repairTable" style="width: 100%;padding: 0" :show-header="false" row-height="70px">
            <el-table-column prop="repairApplicant" width="230px" style="margin-right: -10px">
              <template slot-scope="scope">
                 <span style="margin-right: 2px">员工</span>
                <span style="color: #e0215a">{{ scope.row.repairApplicant }}</span>
                <span style="margin-left: 2px">发起了一个维修申请</span>
            </template>
            </el-table-column>
            <el-table-column prop="objective" width="130px" style="margin-left: -60px">
              <template slot-scope="scope">
                <span style="margin-right: 2px">申请原因:</span>
                <span style="color: #e0215a">{{ scope.row.repairDetail && scope.row.repairDetail.length > 0 ? scope.row.repairDetail[0].reason : '无' }}</span>
              </template>
            </el-table-column >
            <el-table-column prop="status" width="65px" style="margin-left: -20px;padding-left: -20px">
              <template slot-scope="scope">
                <dict-tag style="width: 10px" :options="dict.type.sys_repair_status" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column align="right">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status === '1'" size="mini" type="text" icon="el-icon-view"
                           @click="lookWaitDetail(scope.row,'repair')">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        <!--请假申请详细信息 弹出框-->
          <el-dialog :title="title" :visible.sync="leaveOpen" width="600px" append-to-body>
            <el-descriptions title="请假申请详细信息">
                <el-descriptions-item label="申请人">{{leaveObj.name}}</el-descriptions-item>
                <el-descriptions-item label="开始日期">{{leaveObj.leaveDate}}</el-descriptions-item>
                <el-descriptions-item label="结束日期">{{leaveObj.returnDate}}</el-descriptions-item>
                <el-descriptions-item label="申请时长">{{leaveObj.time}}</el-descriptions-item>
                <el-descriptions-item label="申请类型">{{leaveObj.type}}</el-descriptions-item>
                <el-descriptions-item label="申请理由">{{leaveObj.reasons}}</el-descriptions-item>
            </el-descriptions>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="leaveSubmit(leaveObj.id)">通 过</el-button>
            <el-button type="primary" @click="leaveReject(leaveObj.id)">驳 回</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

          <!--出差申请详细信息 弹出框-->
          <el-dialog :title="title" :visible.sync="evectionOpen" width="600px" append-to-body>
            <el-descriptions title="出差申请详细信息">
                <el-descriptions-item label="申请人">{{evectionObj.name}}</el-descriptions-item>
                <el-descriptions-item label="开始日期">{{evectionObj.startDate}}</el-descriptions-item>
                <el-descriptions-item label="结束日期">{{evectionObj.endDate}}</el-descriptions-item>
                <el-descriptions-item label="出差目的地">{{evectionObj.target}}</el-descriptions-item>
                <el-descriptions-item label="出差目的">{{evectionObj.objective}}</el-descriptions-item>
                <el-descriptions-item label="出差预计费用">{{evectionObj.cost}}</el-descriptions-item>
            </el-descriptions>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="evectionSubmit(evectionObj.id)">通 过</el-button>
            <el-button type="primary" @click="evectionReject(evectionObj.id)">驳 回</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

          <!--离职申请详细信息 弹出框-->
        <el-dialog :title="title" :visible.sync="lizhiLeaveOpen" width="600px" append-to-body>
          <el-descriptions title="出差申请详细信息">
              <el-descriptions-item label="申请人">{{lizhiLeaveObj.name}}</el-descriptions-item>
              <el-descriptions-item label="离职类型">{{lizhiLeaveObj.type}}</el-descriptions-item>
              <el-descriptions-item label="离职原因">{{lizhiLeaveObj.reason}}</el-descriptions-item>
              <el-descriptions-item label="离职说明">{{lizhiLeaveObj.reasonDetail}}</el-descriptions-item>
              <el-descriptions-item label="申请日期">{{lizhiLeaveObj.applicationDate}}</el-descriptions-item>
              <el-descriptions-item label="离职日期">{{lizhiLeaveObj.leaveDate}}</el-descriptions-item>
          </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="lizhiLeaveSubmit(lizhiLeaveObj.id)">通 过</el-button>
          <el-button type="primary" @click="lizhiLeaveReject(lizhiLeaveObj.id)">驳 回</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

          <!--维修申请详细信息 弹出框-->
        <el-dialog :title="title" :visible.sync="repairOpen" width="600px" append-to-body>
          <el-descriptions title="维修申请详细信息">
              <el-descriptions-item label="维修申请人">{{repairObj.repairApplicant}}</el-descriptions-item>
              <el-descriptions-item label="维修申请日期">{{repairObj.repairAppdate}}</el-descriptions-item>
              <el-descriptions-item label="维修费用">{{repairObj.repairWages}}元</el-descriptions-item>
              <el-descriptions-item label="维修数量">{{repairObj.repairCount}}个</el-descriptions-item>
              <el-descriptions-item label="维修日期">{{repairObj.repairDate}}</el-descriptions-item>
          </el-descriptions>
          <el-table :data="repaieDetailList">
            <el-table-column label="序号" type="index" :index="indexMethod" align="center"/>
            <el-table-column label="资产名称" align="center" prop="name" />
            <el-table-column label="资产类别" align="center" prop="type" />
            <el-table-column label="配件品牌" align="center" prop="brand" />
            <el-table-column label="维修原因" align="center" prop="reason" />
          </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="repairSubmit(repairObj.id)">通 过</el-button>
          <el-button type="primary" @click="repairReject(repairObj.id)">驳 回</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

          <!--通知公告详细信息 弹出框-->
        <el-dialog :title="title" :visible.sync="noticeOpen" width="500px" append-to-body>
        <div>
          <span style="font-size: 20px;padding-left: 120px">{{noticeTitle}}</span>
        </div>
          <div style="padding-left: 120px;margin-top: 20px">{{stripHTML(noticeContent)}}</div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancel">确定</el-button>
        </div>
      </el-dialog>
        </span>
      </el-card>
    </div>

    <div class="myNotice">
      <h3 style="display: inline-block">消息通告</h3><el-button type="text" style="margin-left: 400px">更多...</el-button>
      <el-card class="box-card task-card" style="height: 370px">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleNoticeSelect">
          <el-menu-item index="1">通知</el-menu-item>
          <el-menu-item index="5" style="float: right">公告</el-menu-item>
          <span style="display:inline-block;height: 420px;width: 520px" class="spanTable">
            <el-table :data="noticeTable" style="width: 100%;padding: 0" :show-header="false" row-height="70px">
              <el-table-column prop="objective" width="350px">
                <template slot-scope="scope">
                  <span style="margin-right: 2px"><i class="el-icon-s-promotion"></i>通知: </span>
                  <span v-html="stripHTML(scope.row.noticeTitle)"></span>
                </template>
              </el-table-column >
              <el-table-column align="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-view"
                             @click="lookNoticeDetail(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </span>
        </el-menu>
      </el-card>
    </div>

  </div>
</template>

<script>
import {
  getStatusList,
  evectionChangeStatus,
  askLeaveChangeStatus,
  repairChangeStatus,
  lizhiLeaveChangeStatus,
  getUserNum,
  getNoticeList,
  getUserName} from "@/api/index";
import { getRepair } from "@/api/system/repair";
import { getNotice } from "@/api/system/notice";
export default {
  name: "Index",
  dicts: ['ask_leave','ask_type','sys_leave_status','sys_repair_status'],
  data() {
    return {
      // 版本号
      version: "3.8.6",
      activeIndex:"1",
      repaieDetailList:[],
      tableData: [],
      tableLeaveData: [],
      lizhitableData: [],
      noticeTable:[],
      repairTable:[],
      // 是否显示弹出层
      leaveOpen: false,
      evectionOpen: false,
      lizhiLeaveOpen: false,
      repairOpen: false,
      noticeOpen: false,
      // 弹出层标题
      title: "",
      noticeTitle:null,
      noticeContent:null,
      totalNum: null,
      userName:null,
      leaveObj:{
        id:null,
        name:'',
        leaveDate:'',
        reurnDate:'',
        reasons:'',
        type:'',
        time:'',
      },
      evectionObj:{
        id:null,
        name:'',
        startDate:'',
        endDate:'',
        objective:'',
        target:'',
        cost:'',
      },
      lizhiLeaveObj:{
        id:null,
        name:'',
        reason:'',
        type:'',
        reasonDetail:'',
        applicationDate:'',
        leaveDate:''
      },
      repairObj:{
        id:null,
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList(){
      getStatusList(1).then(res => {
        console.log(res.data.repairList)
        res.data.evection.forEach(i => {
          this.tableData.push(i);
        });
        res.data.askLeave.forEach(i => {
          this.tableLeaveData.push(i);
        });
        res.data.leaves.forEach(i => {
          this.lizhitableData.push(i);
        });
        res.data.repairList.forEach(i => {
          console.log(i.repairDetailList)
          this.repairTable.push(i);
        });

      });
      getNoticeList(1).then(res=>{
        res.data.notices.forEach(i=>{
          this.noticeTable.push(i);
        })
      })
      getUserNum().then(res=>{
        this.totalNum = res.data;
      })
      getUserName().then(res=>{
        console.log(res)
        this.userName = res.msg;
      })
    },
    handleSelect(key, keyPath) {
      this.tableData = [];
      this.tableLeaveData = [];
      this.lizhitableData = [];
      this.repairTable = [];
      getStatusList(key).then(res => {
        res.data.evection.forEach(i => {
          this.tableData.push(i);
        });
        res.data.askLeave.forEach(i => {
          this.tableLeaveData.push(i);
        });
        res.data.leaves.forEach(i => {
          this.lizhitableData.push(i);
        });
        res.data.repairList.forEach(i => {
          console.log(i.repairDetailList)
          this.repairTable.push(i);
        });
      });
    },
    //消息通知类型选择
    handleNoticeSelect(key, keyPath){
      this.noticeTable = [];
      getNoticeList(key).then(res=>{
        res.data.notices.forEach(i=>{
          this.noticeTable.push(i);
        })
      })
    },
    lookWaitDetail(row,type){
      console.log(row)
      //出差申请
      if(type==='evection'){
        this.evectionObj = row;
        this.evectionOpen = true;
      }
      //请假申请
      if(type==='askLeave'){
        this.leaveObj = row;
        this.leaveOpen = true;
      }
      //离职申请
      if(type==='lizhiLeave'){
        this.lizhiLeaveObj = row;
        this.lizhiLeaveOpen = true;
      }
      //维修申请
      if(type==='repair'){
        getRepair(row.id).then(res=>{
          this.repairObj = res.data;
          this.repaieDetailList = res.data.repairDetailList;
        });
        this.repairObj = row;
        this.repairOpen = true;
      }
      this.title = "审批";
    },
    lookNoticeDetail(row){
        getNotice(row.id).then(res => {
          console.log(res)
          this.noticeContent = res.data.noticeContent;
          this.noticeTitle = res.data.noticeTitle;
        });
        this.noticeOpen = true;
        this.title = "通知公告";
    },
    //请假申请通过按钮
    leaveSubmit(id){
      console.log("出差申请id:"+id)
      var data={
        id : id,
        status : 2
      }
      askLeaveChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.leaveOpen = false;
        this.$modal.msgSuccess("审批已通过");
      })
    },
    //请假申请驳回按钮
    leaveReject(id){
      console.log("出差申请id:"+id)
      var data={
        id : id,
        status : 3
      }
      askLeaveChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.leaveOpen = false;
        this.$modal.msgSuccess("审批已驳回");
      })
    },
    //出差申请通过按钮
    evectionSubmit(id){
      console.log("出差申请id:"+id)
      var data={
        id : id,
        status : 2
      }
      evectionChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.evectionOpen = false;
        this.$modal.msgSuccess("审批已通过");
      })
    },
    //出差申请驳回按钮
    evectionReject(id){
      console.log("出差申请id:"+id)
      var data={
        id : id,
        status : 3
      }
      evectionChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.evectionOpen = false;
        this.$modal.msgSuccess("审批已驳回");
      })
    },
    //离职申请通过按钮
    lizhiLeaveSubmit(id){
      console.log("出差申请id:"+id)
      var data={
        id : id,
        status : 2
      }
      lizhiLeaveChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.lizhiLeaveOpen = false;
        this.$modal.msgSuccess("审批已通过");
      })
    },
    //离职申请驳回按钮
    lizhiLeaveReject(id){
      console.log("出差申请id:"+id)
      var data={
        id : id,
        status : 3
      }
      lizhiLeaveChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.lizhiLeaveOpen = false;
        this.$modal.msgSuccess("审批已通过");
      })
    },
    //维修申请通过按钮
    repairSubmit(id){
      console.log("维修申请id:"+id)
      var data={
        id : id,
        status : 2
      }
      repairChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.repairOpen = false;
        this.$modal.msgSuccess("审批已通过");
      })
    },
    //维修驳回通过按钮
    repairReject(id){
      console.log("维修申请id:"+id)
      var data={
        id : id,
        status : 3
      }
      repairChangeStatus(data).then(res=>{
        this.tableLeaveData = [];
        this.tableData = [];
        this.lizhitableData = [];
        this.repairTable = [];
        this.getList();
        this.repairOpen = false;
        this.$modal.msgSuccess("审批已驳回");
      })
    },
    cancel(){
      this.leaveOpen = false;
      this.evectionOpen = false;
      this.lizhiLeaveOpen = false;
      this.repairOpen = false;
      this.noticeOpen = false;
    },
    interUser() {
      // this.$router.push({ path: "/courierManage/verifyList" });
    },
    stripHTML(html) {
      const doc = new DOMParser().parseFromString(html, 'text/html');
      return doc.body.textContent || '';
    },
    indexMethod(index) {
      return index + 1;
    }
  }
};
</script>

<style scoped lang="scss">
.spanTable ::v-deep .el-table .cell{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.myNotice ::v-deep el-card__body{
  padding-top: 0 !important;
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
}
.app-container{
  padding-left: 50px;
}
.task-card{
  width: 550px;
  height: 250px;
}
.dai-card{
  width: 590px;
  height: 560px;
}
.myTask .myNotice{
  margin-left: 50px;
}
.home_title {
  padding: 8px 0 33px 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  position: relative;
}
.home_title .txt {
  font-size: 14px;
  line-height: 16px;
  color: #999;
}
.myShen{
  position: absolute;
  top:20px;
  right: 50px;
}
.item {
  margin-top: 5px;
  margin-right: 30px;
}
.no-row-padding .el-table__body tr {
  padding: 0; /* 设置为零 */
}
.el-table th, .el-table td {
  padding: 0; /* 设置为 0 来覆盖默认 padding */
}
.title2 {
  font-size: 16px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bt1 {
  font-weight: 700;
  font-size: 32px;
  line-height: 37px;
  margin-left: 10px;
}
.bt_top {
  margin-top: 2px;
}
.bt_top1 {
  margin-top: 2px;
}
.bt2 {
  font-size: 12px;
  line-height: 5px;
  margin-left: 5px;
}
.txt1 {
  font-size: 14px;
  line-height: 5px;
  color: #999999;
}
.marT {
  margin-top: -8px;
  margin-right: -8px;
}
.blue .txt1 {
  font-size: 14px;
  line-height: 16px;
  color: #a6c5f9;
}
.list {
  padding: 16px;
  flex: 1;
  border-radius: 2px;
  margin-right: 8px;
  background-color: #fff;
}
.blue {
  background-color: #206ef1;
  color: #fff;
}
</style>

